<template>
  <div class="cart-page">
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ tableId }}号桌 - 购物车</h1>
        <p class="page-subtitle">确认您的订单</p>
      </div>
    </div>

    <div class="container">
      <div class="cart-content">
        <div v-if="cartStore.isEmpty" class="empty-cart">
          <el-icon size="80" color="#ddd">
            <ShoppingCart />
          </el-icon>
          <h3>购物车是空的</h3>
          <p>快去选择一些美味的菜品吧！</p>
          <el-button type="primary" size="large" @click="goToMenu">
            去点餐
          </el-button>
        </div>

        <div v-else class="cart-items">
          <div class="cart-item" v-for="item in cartStore.items" :key="item.id">
            <div class="item-image">
              <img :src="item.image" :alt="item.name">
            </div>
            <div class="item-info">
              <h3 class="item-name">{{ item.name }}</h3>
              <p class="item-price">¥{{ item.price }}</p>
            </div>
            <div class="item-actions">
              <el-button
                type="danger"
                size="small"
                circle
                @click="decreaseQuantity(item.id)"
              >
                <el-icon><Minus /></el-icon>
              </el-button>
              <span class="item-quantity">{{ item.quantity }}</span>
              <el-button
                type="primary"
                size="small"
                circle
                @click="increaseQuantity(item.id)"
              >
                <el-icon><Plus /></el-icon>
              </el-button>
            </div>
            <div class="item-total">
              ¥{{ (item.price * item.quantity).toFixed(2) }}
            </div>
          </div>
        </div>

        <div v-if="!cartStore.isEmpty" class="cart-summary">
          <div class="summary-item">
            <span>商品总数：</span>
            <span>{{ cartStore.totalItems }} 件</span>
          </div>
          <div class="summary-item total">
            <span>总计：</span>
            <span class="total-price">¥{{ cartStore.totalPrice.toFixed(2) }}</span>
          </div>
        </div>

        <div v-if="!cartStore.isEmpty" class="cart-actions">
          <el-button size="large" @click="goToMenu">
            <el-icon><ArrowLeft /></el-icon>
            继续点餐
          </el-button>
          <el-button type="primary" size="large" @click="submitOrder">
            <el-icon><Check /></el-icon>
            提交订单
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const cartStore = useCartStore()

const tableId = computed(() => route.params.tableId)

const decreaseQuantity = (dishId) => {
  const currentQuantity = cartStore.getItemQuantity(dishId)
  if (currentQuantity > 1) {
    cartStore.updateQuantity(dishId, currentQuantity - 1)
  } else {
    cartStore.removeItem(dishId)
  }
}

const increaseQuantity = (dishId) => {
  const currentQuantity = cartStore.getItemQuantity(dishId)
  cartStore.updateQuantity(dishId, currentQuantity + 1)
}

const goToMenu = () => {
  router.push(`/menu/${tableId.value}`)
}

const submitOrder = async () => {
  try {
    await ElMessageBox.confirm(
      `确认提交订单？总计：¥${cartStore.totalPrice.toFixed(2)}`,
      '确认订单',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 跳转到订单确认页面
    router.push(`/order/${tableId.value}`)
  } catch {
    // 用户取消
  }
}
</script>

<style scoped>
.cart-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.cart-content {
  padding: 40px 0;
}

.empty-cart {
  text-align: center;
  padding: 80px 20px;
}

.empty-cart h3 {
  margin: 20px 0 10px;
  color: #666;
}

.empty-cart p {
  color: #999;
  margin-bottom: 30px;
}

.cart-items {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
}

.item-price {
  color: #666;
  margin: 0;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px;
}

.item-quantity {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
  color: #333;
}

.item-total {
  font-size: 18px;
  font-weight: bold;
  color: #e6a23c;
  min-width: 80px;
  text-align: right;
}

.cart-summary {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  font-size: 18px;
  font-weight: bold;
}

.total-price {
  color: #e6a23c;
  font-size: 24px;
}

.cart-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 768px) {
  .cart-item {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .item-image {
    margin-right: 0;
  }
  
  .item-actions {
    margin: 0;
  }
  
  .cart-actions {
    flex-direction: column;
  }
}
</style> 